<template>
  <div class="about_wrapper">
    <div class="banner" v-if="useWidth.width.value> 750" :style="{background:'url('+aboutus_background.imageUrl+')  no-repeat center'}">
<!--       <div class="width">
        <h2>关于我们</h2>
      </div>-->
    </div>
    <div class="banner" v-if="useWidth.width.value  <= 750" :style="{background:'url('+aboutus_background.imagePhone+')  no-repeat center'}">
<!--       <div class="width">
        <h2>关于我们</h2>
      </div>-->
    </div>
    <div class="about_conten">
      <div
        class="about_list_content_breadcrumb"
        :style="{ width: settingStore.publicWidth }"
      >
        <t-breadcrumb>
          <t-breadcrumb-item to="/dashboard/base"> 首页 </t-breadcrumb-item>
          <t-breadcrumb-item>关于我们</t-breadcrumb-item>
        </t-breadcrumb>
      </div>
      <div class="about_text_content">
        <div
          class="about_text_box"
          :style="{ width: settingStore.publicWidth }"
        >
          <div class="about_text_box_left">
            <div class="box_content_title">
              <h3>关于我们</h3>
              <span></span>
              <h4>About Us</h4>
            </div>
<!--            <p>
              校苑视界创新教育中心始终致力于推动青少年创新教育发展，持续培养面向未来的创新人才，为国家科技创新储备后备力量。
            </p>
            <p>
              中心联合北京石墨烯研究院(BGI)等各领域顶尖科研机构，构建“大中小”贯通培养路径，为拔尖创新人才的培养提供专业支撑。
            </p>
            <p>
              未来，将持续发挥桥梁作用，整合资源，推动青少年研究思维、工程思维市场思维的培养，为国家战略新兴产业发展筑牢人才根基。
            </p>-->
            <div v-html="about_us"></div>
          </div>
          <div class="about_text_box_right"></div>
        </div>
      </div>

      <!-- <div class="about_text_bottom">
        <div class="about_text_bottom_box">
          <div>
            <img src="@/assets/aboutUs4-1.png" alt="" />
            <p>持续培养面向未来的创新人才</p>
          </div>
          <div>
            <img src="@/assets/aboutUs4-2.png" alt="" />
            <p>为国家科技创新储备后备力量</p>
          </div>
        </div>
      </div> -->
    </div>
    <footer class="copyright"></footer>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
import { backImage, contentConfig } from "@/api";
import { useWindowResize } from "@/utils/useWindowResize";

export default {
  name: "about",
};
const useWidth = useWindowResize();
const about_us = ref('');
contentConfig("about_us").then(e=> {
  about_us.value = e.content;
})
// 背景图片
const aboutus_background = ref({imagePhone:null,imageUrl:null});
backImage("aboutus_background").then((e) => {
  aboutus_background.value = e;
});
</script>
<script setup lang="ts">
import { useSettingStore } from "@/store";
const settingStore = useSettingStore();
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
